﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="FileManager.aspx.cs" Inherits="Web.Admin.Page_FileManager.FileManager" %>
<%@ Import Namespace="System" %>
<%@ Import Namespace="System.Collections" %>
<%@ Import Namespace="System.Collections.Generic" %>
<%@ Import Namespace="System.IO" %>
<%@ Import Namespace="System.Web" %>
<%@ Import Namespace="System.Web.UI" %>
<%@ Import Namespace="System.Web.UI.WebControls" %>

<!DOCTYPE html>

<%="<!--[if IE 8]> <html class=\"ie8 no-js\"> <![endif]-->"%>
<%="<!--[if IE 9]> <html class=\"ie9 no-js\"> <![endif]-->"%>
<%="<!--[if !IE]><!-->"%>
<html>
<%="<!--<![endif]-->"%>
    <!-- BEGIN HEAD -->

    <head>
        <meta charset="utf-8" />
        <title><%=Evan.Common.CommFun.GetAppSetting("AdminTitle") %> - 后台管理系统</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta content="width=device-width, initial-scale=1" name="viewport" />
        <!-- #include file="../include/com_res_css.inc" -->
        <style type="text/css">
            .filelists { width:160px;height:205px; float:left; margin-right:13px; cursor:default; }
            .filecont { width:158px; height:158px; display:table-cell; text-align:center;vertical-align: middle;  color:#3d4957; font-size:40px; }
            .filetitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;padding:0px 10px 10px 10px; text-align:center; }
            .file-contain { border:1px solid #eee;text-align:center; }
            .file-contain.select { border:1px solid #ed6b75  !important;text-align:center; background-color:#ed6b75  !important; color:#ffffff !important; }
            .file-contain.select .filecont { color:#ffffff !important; }
            .file-contain:hover { border:1px solid #cfd5de;text-align:center; background-color:#cfd5de; color:#212121;  }
            .noselect { moz-user-select: -moz-none; -moz-user-select: none; -o-user-select:none; -khtml-user-select:none; -webkit-user-select:none; -ms-user-select:none; user-select:none; }

            .fileinput-button {position: relative;overflow: hidden;display: inline-block;}
            .fileinput-button input {position: absolute;top: 0;right: 0;margin: 0;opacity: 0;-ms-filter: 'alpha(opacity=0)';font-size: 200px;direction: ltr;cursor: pointer;}
            /* Fixes for IE < 8 */
            @media screen\9 {
               .fileinput-button input {filter: alpha(opacity=0);font-size: 100%;height: 100%;}
            }


            .files .template-download .filename {
                width:300px; overflow:hidden;
            }
            .files .template-download .filelength {
                width: 150px;
                text-align: center;
            }
            .files .template-download .progress {
                height: 10px;
                margin-bottom: 0px;
                margin-top: 5px;
            }
            .files .template-download .notices span {
                color:#e7505a;
            }
            .files tr:last-child {
                border-bottom:1px solid #e6e6e6;
            }
        </style>

        
    </head>
    <!-- END HEAD -->

    <body class="page-header-fixed page-sidebar-closed-hide-logo page-content-white">
        <!-- BEGIN HEADER -->
        
        <!-- #include file="../include/top_bar.inc" -->

        <!-- END HEADER -->
        <!-- BEGIN HEADER & CONTENT DIVIDER -->
        <div class="clearfix"> </div>
        <!-- END HEADER & CONTENT DIVIDER -->
        <!-- BEGIN CONTAINER -->
        <div class="page-container">
            <!-- BEGIN SIDEBAR -->
            
            <!-- #include file="../include/left_menu.inc" -->
            
            <!-- END SIDEBAR -->
            <!-- BEGIN CONTENT -->
            <div class="page-content-wrapper">
                <!-- BEGIN CONTENT BODY -->
                <div class="page-content">
                    <!-- BEGIN PAGE HEADER-->
                    <!-- BEGIN THEME PANEL -->
                    <!-- #include file="../include/theme_panel.inc" -->
                    <!-- END THEME PANEL -->
                    <!-- BEGIN PAGE BAR -->
                    
                    <!-- END PAGE BAR -->
                    <!-- BEGIN PAGE TITLE-->
                    <h3 class="page-title"> 文件管理 
                        <p>
                            <span style="color:#e7505a;font-size:16px;font-weight:bold;">注 : 文件删除后无法恢复 , 请谨慎操作</span>
                        </p>
                    </h3>
                    <!-- END PAGE TITLE-->
                    <!-- END PAGE HEADER-->
                    <!-- BEGIN PAGE CONTENT-->

                                    <div class="portlet light bordered">
                                        <div class="btn-group" style="margin-bottom:8px;">
                                            <button type="button" class="btn btn-xs btn-default" style="width:802px; text-align:left; padding:5px; border-color:#dedede;">
                                                <i class="fa fa-folder-open"></i> <span class="curpath"></span></button>
                                        </div>
                                        <div class="portlet-title tabbable-line">
                                            <div class="btn-group">
                                                <button type="button" class="btn btn-default action-home">
                                                    <i class="fa fa-home"></i> 主页</button>
                                                <button type="button" class="btn btn-default action-up">
                                                    <i class="fa fa-arrow-up"></i> 上一级</button>
                                                <button type="button" class="btn btn-default action-refresh">
                                                    <i class="fa fa-refresh"></i> 刷新</button>
                                                <button type="button" class="btn btn-default action-checkall" data-ischeck ="false">
                                                    <i class="fa fa-check-square-o"></i> <span>全选</span></button>
                                                <button type="button" class="btn btn-default action-newfolder">
                                                    <i class="fa fa-folder-open-o"></i> 新建文件夹</button>
                                            </div>
                                            <div class="btn-group">
                                                <button type="button" class="btn btn-default action-cut">
                                                    <i class="fa fa-cut"></i> 移动</button>
                                                <button type="button" class="btn btn-default action-copy">
                                                    <i class="fa fa-copy"></i> 复制</button>
                                                <button type="button" class="btn btn-default action-remove">
                                                    <i class="fa fa-remove"></i> 删除</button>
                                                <button type="button" class="btn green action-paste hide">
                                                    <i class="fa fa-paste"></i> 粘贴</button>
                                            </div>
                                            <div class="btn-group">
                                                <a type="button" class="btn btn-default action-upload"  data-toggle="modal" href="#uploadpanel">
                                                    <i class="fa fa-upload"></i> 上传</a>
                                            </div>
                                            <div class="btn-group ">
                                                <button type="button" class="btn btn-default action-faq" >
                                                    <i class="fa fa-question-circle"></i> 常见问题</button>
                                            </div>

                                        </div>

                                        <div class="tab-content noselect"  onselect="javascript:return false;">
                                            
                                        </div>
                                  </div>
                    

                    
                    <!-- END PAGE CONTENT-->
                </div>
                <!-- END CONTENT BODY -->
            </div>
            <!-- END CONTENT -->
            
        </div>
        <!-- END CONTAINER -->

        <div class="modal fade bs-modal-lg" id="uploadpanel" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                        <h4 class="modal-title">上传文件</h4>
                    </div>
                    <div class="modal-body"> 
                        <form id="fileupload" enctype="multipart/form-data">
                            <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
                            <div class="row fileupload-buttonbar">
                                <div class="col-lg-7">
                                    <!-- The fileinput-button span is used to style the file input field as button -->
                                    <span class="btn green fileinput-button">
                                        <i class="fa fa-plus"></i>
                                        <span>选择文件 </span>
                                        <input type="file" id="addFiles" multiple="multiple" accept=".jpg,.jpeg,.bmp,.png,.gif,.txt,.doc,.docx,.ini,.conf,.eml,.xlsx,.xls,.pdf,.ipk,.apk,.mp4">
                                    </span>
                                    <button type="button" class="btn warning cancel filemanager-upload-cancel">
                                        <i class="fa fa-ban-circle"></i>
                                        <span>取消上传 </span>
                                    </button>
                                    <!-- The global file processing state -->
                                </div>
                                <!-- The global progress information -->
                                
                            </div>
                            <!-- The table listing the files available for upload/download -->
                            <table role="presentation" class="table table-striped table-hover clearfix" style="margin-top:20px">
                                <tbody class="files" >

                                </tbody>
                            </table>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn green " data-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>


        <div class="problems hide">
            <div style="max-height:600px;overflow:auto;">
                <div style='height:auto'>
                    <div class="note note-info">
                        <h4 class="block">为什么文件会上传失败 ?</h4>
                        <p> 上传文件过程中, 网络断掉或者服务器响应超时都会导致上传失败 .</p>
                    </div>
                    <div class="note note-info">
                        <h4 class="block">为什么上传大小建议为20M以内 ?</h4>
                        <p> 上传文件过程中, 根据网速或网络环境不同 , 有时候会发送数据至服务器的时候服务器上下传输有断层 , 通常超过5秒Web服务器则会对某个请求响应超时 , 所以容易会发生服务器超时而上传失败 .</p>
                    </div>
                    <div class="note note-info">
                        <h4 class="block">我要传超过20M的文件应该怎么上传 ?</h4>
                        <p> 上传大文件 , 建议使用FTP工具上传 , 稳定快速 . </p>
                    </div>
                    <div class="note note-info">
                        <h4 class="block">为什么FTP能上传大文件 , 而网站却不支持 ?</h4>
                        <p> FTP(文件传输协议)是一种专门用于文件传输的协议 , 而网站使用的是HTTP协议(超文本传输协议) , HTTP协议本身就不是为上传文件而设计的协议 . </p>
                    </div>
                </div>
            </div>
        </div>


        <div id="file-context-menu">
            <ul class="dropdown-menu" role="menu">
                <li id="copypath" data-clipboard-text=""><a href="javascript:;"><i class="fa fa-copy"></i> 复制路径 </a></li>
                <%--<li><a href="javascript:;"><i class="icon-present"></i> New Event<span class="badge badge-success">4</span></a></li>
                <li><a href="javascript:;"><i class="icon-basket"></i> New order </a></li>
                <li class="divider"> </li>
                <li><a href="javascript:;"><i class="icon-flag"></i> Pending Orders<span class="badge badge-danger">4</span></a></li>
                <li><a href="javascript:;"><i class="icon-users"></i> Pending Users<span class="badge badge-warning">12</span></a></li>--%>
            </ul>
        </div>
        

        <!-- #include file="../include/footer.inc" -->
        <!-- #include file="../include/com_res_js.inc" -->

    </body>
    <script type="text/javascript">
        var rootPath = "<%=Evan.Common.CommFun.GetAppSetting("FileManagerPath")%>";
        rootPath = rootPath == "" ? rootPath : "\\" + rootPath;
        var allowExtName = "<%=Evan.Common.CommFun.GetAppSetting("UploadType")%>";
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>
    <script src="../assets/custom/js/filemanager.js"></script>

    <script>
        $(function () {
            var clipboard = new ClipboardJS('#copypath');
            clipboard.on('success', function (e) {
                notice("复制路径成功", "success");
                e.clearSelection();
            });
            clipboard.on('error', function (e) {
                bootbox.alert("您的浏览器可能不支持此操作 , 请手动复制下方链接<br/><br/><input type='text' value='" + copyTxt + "' class='form-control' />");
            });
        });
    </script>

</html>